
<template>
  <div class="z-upload">
    <el-upload
        ref="upload"
        :action="action"
        :data="data"
        :before-upload="handleBeforeUpload"
        v-on:on-progress="handleProcess"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        v-bind="binds"
    >
      <el-button v-if="flag" slot="trigger" type="primary">选择文件</el-button>
      <el-button v-if="!getBinds('list-type')" :type="buttonType" :loading="loading">{{getBinds('buttonTxt', buttonTxt)}}</el-button>
      <template v-if="getBinds('list-type') === 'picture-card'" >

        <div class="el-upload--picture-card-con"><i class="el-icon-circle-plus"></i></div>
      </template>

      <div slot="tip" class="el-upload__tip">{{getBinds('tip', '')}}</div>
    </el-upload>
  </div>
</template>
<script>

export default {
  name: 'ZUpload',
  components: {},
  props: {
    value: null,
    buttonTxt: {
      type: String,
      default: "Upload"
    },
    flag: {
      type:Boolean,
      default:false
    },
    action: {
      type: String,
      required: true
    },
    buttonType: {
      type: String,
      default: "primary"
    },
    data: null,
    fileSize: null, // 文件大小限制，单位为K
    uploadId: null,
    name: null,
    onSuccess: Function,
    onProgress: Function,
    beforeUpload: Function,
    fileType: null, // 文件类型限制用|分隔 如png|jpg|jpeg|gif
    binds: {
      type: Object,
      default() {
        return {}
      }
    },
    ElMessage: {
      type: Function,
      default() {
        return globalThis.ELEMENT.Message
      }
    }
  },
  data() {
    return {
      loading: false
    };
  },
  computed: {
    $_uploadFiles() {
      this.loading;
      console.log(this.$refs.upload)
      if (!this.$refs.upload) {
        return []
      }
      return this.$refs.upload.uploadFiles ?? []
    }
  },
  methods: {
    getBinds(path = '', defaultVal = '') {
      if (!this.binds) {
        return ''
      }
      // console.log(this.binds)
      return ZY.lodash.get(this.binds, path, defaultVal)
    },
    httpRequest(config) {
      console.log(config, this.ElMessage)

      console.log(this.$refs.upload)
      const xhr = new XMLHttpRequest();
      // 开始进度条，从0开始， 这里是干了on-progress钩子里的事
      setTimeout(() => {
        config.onProgress({ percent: 100 })
        config.onSuccess({})
        this.loading = false;
      }, 1000)
      return xhr
    },
    handleBeforeUpload(file) {
      // console.log(file)
      const fileName = file.name;
      const ext = fileName
          .substring(fileName.lastIndexOf(".") + 1)
          .toLowerCase();
      if (Array.isArray(this.fileType)) {
        // 限制文件格式
        if (this.fileType.indexOf(ext) < 0) {
          this.ElMessage.error("文件类型不合法，请上传" + this.fileType);
          return false;
        }
      }
      if (this.fileSize) {
        // 限制文件大小，单位为k
        if (file.size / 1024 > this.fileSize) {
          this.ElMessage.error("文件大小限制为" + this.fileSize + "k");
          return false;
        }
      }
      this.loading = true; // 开启上传中状态
      if (this.beforeUpload) {
        const arg = [].slice.call(arguments);
        if (this.uploadId) {
          arg.push(this.uploadId);
        }
        this.beforeUpload.apply(this, arg);
      }
    },
    handleProcess(){
      this.$emit('on-progress');
    },
    handleUploadSuccess() {
      this.loading = false; // 关闭上传中状态
      if (this.onSuccess) {
        const arg = [].slice.call(arguments);
        if (this.uploadId) {
          arg.push(this.uploadId);
        }
        this.onSuccess.apply(this, arg);
      }

      // console.log(this.$refs.upload.uploadFiles)
    },
    handleUploadError() {
      this.loading = false; // 关闭上传中状态
      this.ElMessage.error("上传失败");
    }
  }
};
</script>
